<template>
  <div class="root" :class="[store.getters.getLayout.layoutMode]">
    <div class="menu" :class="[store.getters.getLayout.layoutMode]">
      <mainMenuView />
    </div>
    <div class="flex-max right-content">
      <div class="top-tab">
        <navbarView />
      </div>
      <div class="flex-max content" :class="[store.getters.getLayout.layoutMode]">
        <router-view v-slot="{ Component }">
          <transition name="slide-right" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import NavbarView from "@/views/main/navbar.vue"
import mainMenuView from "@/views/main/menu.vue"
import navbarView from "@/views/main/navbar.vue"
import {useStore} from 'vuex'

const store = useStore()    //获取store对象
</script>

<style lang="scss" scoped>
.root{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  background-color: #f2f2f2;
  overflow: hidden;

  box-sizing: border-box;

  .menu{
    box-sizing: border-box;
    //align-self: flex-start;
  }

  .menu.Default{
    margin-right: 15px;
  }

  .right-content{
    display: flex;
    flex-direction: column;
  }

  .top-tab{
    width: 100%;
    height: 50px;

    overflow-x: auto;
  }
}
.root.Default{
  padding: 15px 15px 15px 15px;
}

.content.Default{
  padding: 0
}

.content.Classic,.content.Streamline,.content.Double{
  padding: 10px;
}
</style>
